<route lang="json5">
{
needLogin: true,
style: {
navigationStyle: 'default',
navigationBarTitleText: '我的考试',
},
}
</route>

<script lang="ts" setup>
import { ref } from 'vue'
import { examListApi, publishExamPlanApi } from '@/service/my/index'
import { onReachBottom, onLoad } from '@dcloudio/uni-app'
import { useToast } from 'wot-design-uni'
/* 引入 暂无数据 - 图片 */
import emptyImage from '@/static/images/icons/empty.png'

const pageNum = ref(0)
const pageSize = ref(10)

const loading = ref(false)
const finished = ref(false)

const publish = ref(false)
const close = ref(false)
const unPublish = ref(false)

// 修改状态管理
const state = ref<'loading' | 'finished' | 'error'>('loading')

// 课程列表信息
const courseList = ref<any[]>([])

const toast = useToast()

// 请求历史学习记录
async function getDataRequest(isLoadMore = false) {
  if (loading.value || (finished.value && isLoadMore)) return
  loading.value = true
  const params = { pageNum: pageNum.value, pageSize: pageSize.value }
  const data: any = await examListApi(params)
  if (data?.code === 200) {
    const { rows = [], total = 0 } = data || {}

    if (isLoadMore) {
      courseList.value = [...courseList.value, ...rows]
    } else {
      courseList.value = rows
    }

    // 判断是否加载完所有数据
    finished.value = courseList.value.length >= total
    state.value = finished.value ? 'finished' : 'loading'
  } else {
    console.error('获取我的考试失败:', data.msg)
    state.value = 'error'
  }
  loading.value = false
}

async function getPublishExamPlan(id: string) {
  try {
    const params = { id, status: 2 }
    const res = await publishExamPlanApi(params)
    if (res?.code === 200) {
      toast.show('发布考试成功')
      await getDataRequest(false)
    } else {
      toast.show('发布考试失败')
      console.error('发布考试失败:', data.msg)
    }
  } catch {
    toast.show('发布考试失败,请重试')
  }
}

// 页面启动
onLoad(async () => {
  await getDataRequest(false)
})

// 加载更多数据
const loadMore = async () => {
  if (!loading.value && !finished.value) {
    pageNum.value++
    await getDataRequest(true)
  }
}

// 监听页面滚动到底部
onReachBottom(() => {
  if (!loading.value && !finished.value) {
    loadMore()
  }
})

// 跳转考试详情
const goExamDetails = (record: any) => {
  if (record.status !== 1) {
    uni.navigateTo({
      url: `/pages/my/exam/index?id=${record?.id}`,
    })
  } else {
    toast.show('请先发布考试')
  }
}

function publishCourse(record: any) {
  getPublishExamPlan(record.id)
}
</script>

<template>
  <view class="main_container">
    <!-- 骨架屏 -->
    <template v-if="loading && pageNum === 1">
      <wd-skeleton :row="3" animated />
    </template>
    <template v-else>
      <uni-list>
        <uni-list-item v-for="(record, index) in courseList" :key="index">
          <wd-swipe-action :disabled="record.status !== 1">
            <view class="list_item_container" @click="goExamDetails(record)">
              <view class="item_info">
                <!-- 标题 -->
                <text class="exam_title">{{ record.title }}</text>
                <!-- 时间-->
                <text class="exam_time">{{ record.startTime }} 至 {{ record.endTime }}</text>
              </view>

              <view
                :class="{
                  exam_status: true,
                  publish: record.status === 2,
                  unPublish: record.status === 1,
                  close: record.status === 3,
                }"
              >
                {{ record.status === 1 ? '未发布' : record.status === 2 ? '已发布 ' : '已关闭' }}
              </view>
            </view>

            <template #right>
              <view class="action">
                <view class="button" style="background: #01cb7e" @click="publishCourse(record)">
                  <wd-icon name="/static/images/course/publish.png"></wd-icon>
                  <wd-text
                    text="发布"
                    size="20rpx"
                    color="#FFFFFF"
                    custom-style="margin-top:10rpx"
                  />
                </view>
                <view class="button" style="background: #ff3b30">
                  <wd-icon name="/static/images/course/remove.png"></wd-icon>
                  <wd-text
                    text="删除"
                    size="20rpx"
                    color="#FFFFFF"
                    custom-style="margin-top:10rpx"
                  />
                </view>
              </view>
            </template>
          </wd-swipe-action>
        </uni-list-item>
      </uni-list>
    </template>
	
    <view v-if="courseList.length <= 0" class="empty-state flex-center flex-col mt-200rpx">
      <wd-status-tip :image="emptyImage" tip="暂无考试数据" />
    </view>
	
    <!-- 添加加载状态和加载完成的提示 -->
    <wd-loadmore v-if="courseList.length > 0" :state="state" @reload="loadMore" finished-text="已经全部加载完毕"></wd-loadmore>
  </view>
</template>

<style scoped>
.main_container {
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.list_item_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 10rpx;
}

.item_info {
  display: flex;
  flex-direction: column;
}

.action {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90rpx;
}

.exam_title {
  font-size: 28rpx;
  font-weight: bold;
}

.exam_time {
  margin-top: 15rpx;
  font-size: medium;
  font-size: 24rpx;
  color: #999999;
}

:deep(.exam_status) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 45rpx;
  font-size: 24rpx;
  border: 2rpx;
  border-radius: 5rpx;
}

.publish {
  color: #458afe;
  background-color: #f3f7fc;
}

.close {
  color: #f73a4a;
  background-color: #fcf4f5;
}

.unPublish {
  color: #515ffe;
  background-color: #eceeff;
}
</style>
